<template>
  <div class="animate-fadeIn">
    <!-- 页面标题 -->
    <div class="mb-8">
      <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
        <span class="tech-gradient">测试平台仪表板</span>
      </h2>
      <p class="text-gray-600 dark:text-gray-400">实时监控测试环境运行状态和执行结果</p>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <StatCard
        v-for="stat in stats"
        :key="stat.title"
        :title="stat.title"
        :value="stat.value"
        :icon="stat.icon"
        :trend="stat.trend"
        :status="stat.status"
        :progress="stat.progress"
      />
    </div>

    <!-- 图表区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
      <div class="glass-effect rounded-xl p-6 tech-card">
        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
          <i class="fas fa-chart-area mr-2"></i>测试执行趋势
        </h3>
        <div id="chart1" class="chart-placeholder h-64 rounded-lg flex items-center justify-center">
          <ChartPlaceholder 
            icon="fas fa-chart-area"
            color="tech-blue"
            text="数据流传输中..."
          />
        </div>
      </div>

      <div class="glass-effect rounded-xl p-6 tech-card">
        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
          <i class="fas fa-chart-pie mr-2"></i>设备状态分布
        </h3>
        <div id="chart2" class="chart-placeholder h-64 rounded-lg flex items-center justify-center">
          <ChartPlaceholder 
            icon="fas fa-chart-pie"
            color="tech-purple"
            text="实时扫描中..."
          />
        </div>
      </div>
    </div>

    <!-- 快速操作 -->
    <div class="glass-effect rounded-xl p-6 tech-card">
      <h3 class="text-lg font-bold cyber-text mb-6 flex items-center">
        <i class="fas fa-rocket mr-2"></i>快速操作中心
      </h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <QuickAction
          v-for="action in quickActions"
          :key="action.title"
          :title="action.title"
          :icon="action.icon"
          :gradient="action.gradient"
          @click="handleQuickAction(action.action)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import StatCard from '@/components/dashboard/StatCard.vue'
import ChartPlaceholder from '@/components/dashboard/ChartPlaceholder.vue'
import QuickAction from '@/components/dashboard/QuickAction.vue'

const router = useRouter()

const stats = reactive([
  {
    title: '总测试用例',
    value: '1,248',
    icon: 'fas fa-vial',
    trend: '+12.5%',
    status: 'online',
    progress: 75
  },
  {
    title: '执行中任务',
    value: '23',
    icon: 'fas fa-tasks',
    trend: '运行中',
    status: 'busy',
    progress: 50
  },
  {
    title: '在线设备',
    value: '156',
    icon: 'fas fa-server',
    trend: '健康',
    status: 'online',
    progress: 85
  },
  {
    title: '成功率',
    value: '94.2%',
    icon: 'fas fa-chart-line',
    trend: '优秀',
    status: 'online',
    progress: 94
  }
])

const quickActions = reactive([
  {
    title: '创建测试用例',
    icon: 'fas fa-plus',
    gradient: 'from-tech-blue to-tech-purple',
    action: 'create-case'
  },
  {
    title: '执行任务',
    icon: 'fas fa-play',
    gradient: 'from-tech-purple to-tech-green',
    action: 'execute-task'
  },
  {
    title: '添加设备',
    icon: 'fas fa-server',
    gradient: 'from-tech-green to-tech-blue',
    action: 'add-device'
  },
  {
    title: '查看报告',
    icon: 'fas fa-chart-bar',
    gradient: 'from-tech-blue to-tech-green',
    action: 'view-report'
  }
])

const handleQuickAction = (action: string) => {
  switch (action) {
    case 'create-case':
      router.push('/test/create-case')
      break
    case 'execute-task':
      router.push('/task/execute')
      break
    case 'add-device':
      router.push('/device/create')
      break
    case 'view-report':
      router.push('/task/results')
      break
  }
}
</script>

